<template>
    <div
        :key="key"
        :style="{
            width: detail.style.position.w + 'px',
            height: detail.style.position.h + 'px',
            color: detail.style.foreColor,
        }"
    >
        <div
            :style="{
                width: detail.style.position.w + 'px',
                height: detail.style.position.h + 'px',
                color: detail.style.foreColor,
            }"
        >
            <el-table
                :border="false"
                v-loading="loading"
                :cell-style="{ background: this.detail.style.backColor, color: this.detail.style.foreColor }"
                :data="warnList"
                :header-cell-style="{ background: this.detail.style.backColor, color: this.detail.style.foreColor }"
                :row-style="{ background: this.detail.style.backColor, color: this.detail.style.foreColor }"
                :style="{
                    width: detail.style.position.w + 'px',
                    height: detail.style.position.h + 'px',
                    color: detail.style.foreColor,
                }"
            >
                <el-table-column align="center" label="序号" type="index" />
                <el-table-column align="center" label="设备编号" prop="serialNumber" />
                <el-table-column align="center" label="告警名称" prop="alertName" />
                <el-table-column align="center" label="设备名称" prop="deviceName" />
                <el-table-column align="center" label="告警时间" prop="createTime" />
            </el-table>
            <Pagination
                v-show="false"
                :limit.sync="queryParams.pageSize"
                :page-size="10"
                :page-sizes="[5, 10, 15]"
                :page.sync="queryParams.pageNum"
                :style="{ background: this.detail.style.backColor, color: this.detail.style.foreColor }"
                :total="total"
                @pagination="getList"
            />
        </div>
    </div>
</template>

<script>
import BaseView from './View';
import moment from 'moment';
import request from '@/utils/request';

export default {
    name: 'view-warn',
    extends: BaseView,
    computed: {},
    data() {
        return {
            warnList: [],
            loading: false,
            total: 0,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                ztGuid: this.$store.state.app.guid ? this.$store.state.app.guid : this.$route.query.guid,
                orderByColumn: 'createTime',
                isAsc: 'desc',
            },

            classStyle: null,
            config: {
                header: [], //表头数据
                data: [], //表数据
                rowNum: 10, //表行数
                headerBGC: '#00BAFF', //表头背景色
                oddRowBGC: '#003B51', //奇数行背景色
                evenRowBGC: '#0A2732', //偶数行背景色
                waitTime: 2000, //轮播时间间隔
                headerHeight: 35, //表头高度
                columnWidth: [], //列宽度
                align: ['center'], //对齐方式
                index: true, //行号
                indexHeader: '序号', //行号表头
                carousel: 'single', //轮播方式'single'|'page'
                hoverPause: true, //悬停停止轮播
            },
            header: ['时间', '设备名称', '设备地址', '报警信息'],
            timer: null,
            key: 0,
        };
    },
    mounted() {
        this.getList();
        this.timer = setInterval(() => {
            this.getList();
        }, 60000 * 5);
    },
    methods: {
        //格式化时间
        leaveTime(value) {
            return value;
            //return moment(value).format('HH:mm');
        },

        getList() {
            console.log(this, '@!!');
            let url = '/iot/alertLog/list';
            request({
                url: url,
                method: 'get',
                params: this.queryParams,
            }).then((res) => {
                this.warnList = res.rows;
                this.total = res.total;
                this.loading = false;
            });
        },
    },
    beforeDestroy() {
        clearInterval(this.timer);
        this.timer = null;
    },
};
</script>

<style lang="scss" scoped></style>
